import { RootState } from '../../app/store';
import './index.scss';
import { useSelector, useDispatch } from 'react-redux';
import { checkAll, clearDone } from '../TodoListSlice';
export default function Footer() {
  const state = useSelector((state: RootState) => state.todoList);
  const dispatch = useDispatch();
  const doneCount = state.reduce((pre, todo) => {
    return pre + (todo.done ? 1 : 0);
  }, 0);
  const total = state.length;
  const handleCheckAll = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = event.target.checked;
    console.log('value', value);
    // props.checkAll && props.checkAll(value);
    // dispatch({ type: 'checkAll', payload: value });
    dispatch(checkAll(value));
  };
  const handleClearDone = () => {
    console.log('handleClearDone');
    console.log('Clear done');
    // props.clearDone && props.clearDone();
    // dispatch({ type: 'clearDone' });
    dispatch(clearDone());
  };
  return (
    <div className="footer">
      <label className="input-container">
        <input
          className="input"
          type="checkbox"
          id="checkbox1"
          checked={doneCount === state.length && total !== 0 ? true : false}
          onChange={handleCheckAll}
        />
        <span>
          已完成{doneCount} / 全部{total}
        </span>
      </label>
      <button className="button" onClick={handleClearDone}>
        清除已完成任务
      </button>
    </div>
  );
}
